<template>
    <div class="comp-sell-ad-list comp-ad-list">
        <div class="advert-item" v-for="item in sellAdvertList" v-if="isLoading === false && sellAdvertList.length > 0">
            <div class="item-header fn-flex-center advert-item-header">
                <div class="header-asset fn-flex-center">
                    <span class="header-asset-code">賣 {{item.assetcode}} </span>
                    <span class="header-asset-id">|&nbsp;&nbsp;廣告編號：{{item.advertId}}</span>
                </div>
                <!-- <span class="header-right"><span class="header-right-edit" @click="editAdvert(item.advertId)">編輯</span> |  -->
                <span class="header-right-delete" @click="cancelAdvert(item, $event)">刪除</span></span>
            </div>
            <div class="item-detail fn-flex-xcenter">
                <div class="item-detail-col" style="width: 22%;">
                    <span>創建時間</span>
                    <span>{{ $$moment(item.createDate).format('YYYY-MM-DD HH:mm:ss') }}</span>
                </div>
                <div class="item-detail-col" style="width: 25%;">
                    <span>訂單限額</span>
                    <span>{{ $$filter.floorFix(item.minMoney, 2) }}~{{ $$filter.floorFix(item.maxMoney, 2) }} {{ item.currency }}</span>
                </div>
                <div class="item-detail-col" style="width: 20%;">
                    <span>交易價格</span>
                    <span>{{ item.tradePrice }} {{ item.currency }}/{{item.assetcode}}</span>
                </div>
                <div class="item-detail-col" style="width: 20%;">
                    <span>託管鎖定</span>
                    <span>{{ item.maxAmount }} {{ item.assetcode }}</span>
                </div>
                <div class="item-detail-col" style="width: 13%;">
                    <span>狀態</span>
                    <span class="col-money"><b class="col-money-unit">{{ item.status }}</b></span>
                </div>
            </div>
        </div>
        <loading v-if="isLoading"></loading>
        <no-data v-if="isLoading === false && sellAdvertList && sellAdvertList.length === 0"></no-data>
        <pager :page-no="pageNo" :page-size="pageSize" :on-page-change="changePage" :page-num="pageNum"></pager>
    </div>
</template>
<script type="text/babel">
import filter from "../../../../../../grsc-base/util/filter";
import { PAGE_SIZE_5 } from "../../../../../../grsc-base/common/constants";
import Loading from "../../../../../../grsc-base/component/Loading.vue";
import NoData from "../../../../../../grsc-base/component/NoData.vue";
import Pager from "../../../../../../grsc-base/component/Pager.vue";
import service from "../../service";

export default {
  components: {
    Loading,
    NoData,
    Pager
  },
  data() {
    return {
      pageNo: 1,
      pageSize: PAGE_SIZE_5,
      pageNum: 0,
      isLoading: true,

      sellAdvertList: []
    };
  },
  props: {},
  created() {
    this.fetchAdvertList();
  },
  methods: {
    //獲取廣告列表
    fetchAdvertList() {
      let param = {
        pageSize: this.pageSize,
        pageNo: this.pageNo
      };
      service
        .sellAdvertQuery(param)
        .done(rep => {
          if (rep.code === window.CODE.SUCCESS) {
            let listArr = rep.data.list;
            listArr.forEach((item, index) => {
              switch (item.status) {
                case "SHOW":
                  item.status = "展示中";
                  break;
                case "PURCHASED":
                  item.status = "已購買";
                  break;
                case "DELETED":
                  item.status = "已刪除";
                  break;
                default:
                  break;
              }
            });
            this.sellAdvertList = listArr;
            this.pageNum = Number(filter.ceilFix(rep.data.total / this.pageSize, 0));
          } else if (rep.code === window.CODE.NO_PERMISSION.CODE) {
            window.error(
              "未登錄",
              () => {
                window.location.href = "./login.html";
              },
              2000
            );
          } else {
            window.error(rep.msg);
          }
        })
        .always(rep => {
          this.isLoading = false;
        });
    },

    /**
     * 編輯廣告
     * @param advertId
     */
    editAdvert(advertId) {
      window.location.href = "./c2c.html#/ad/update/sell/" + advertId;
    },

    /**
     * 刪除廣告
     * @param item
     * @param $event
     */
    cancelAdvert(item, $event) {
      let that = this;
      window
        .confirm({
          target: $event.target,
          content: "確認刪除廣告？",
          confirmBtnText: "刪除",
          cancelBtnText: "取消"
        })
        .done(() => {
          service
            .sellAdvertDelete({
              advertId: item.advertId
            })
            .done(rep => {
              if (rep.code === window.CODE.SUCCESS) {
                this.fetchAdvertList();
              } else {
                window.error(rep.msg);
              }
            });
        })
        .fail(() => {});
    },

    changePage(currentPage) {
      this.pageNo = currentPage;
      this.fetchAdvertList();
    }
  }
};
</script>

<style lang="sass" rel="stylesheet/scss">
</style>